<template>
    <section >
        <div class="page-container" >

            <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
                <el-form :inline="true" :model="filters">
                    <el-form-item>
                        <el-input v-model="filters.keyword" placeholder="公众号名/用户名"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" v-on:click="searchAccounts()">查询</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleAdd">新增</el-button>
                    </el-form-item>
                </el-form>
            </el-col>

            <el-table :data="list" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column type="index" width="60">
                </el-table-column>
                <el-table-column prop="appName" label="公众号名" width="218"  >
                </el-table-column>
                <el-table-column prop="image" label="头像" width="118"  >
                </el-table-column>
                <el-table-column prop="userName" label="用户名" width="144"  >
                </el-table-column>
                <el-table-column prop="userPhone" label="用户电话" width="144" >
                </el-table-column>
                <el-table-column prop="appId" label="AppId" >
                </el-table-column>
                <el-table-column prop="mchid" label="商家Id"  >
                </el-table-column>
                <el-table-column prop="current" label="当前" >
                    <template slot-scope="scope" >
                       {{getState(scope.row.current)}}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="270">
                    <template scope="scope">
                        <el-button type="success" size="small" >设为当前</el-button>
                        <el-button type="primary" size="small" >编辑</el-button>
                        <el-button type="danger" size="small" >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-col :span="15" v-if="dialogVisible" >
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="AppId">
                        <el-input v-model="form.appId" class="el-input" ></el-input>
                    </el-form-item>
                </el-form>
            </el-col>
        </div>
    </section>
</template>

<script >

    import {getAccounts} from "../../api/api";

    export default {
        data() {
            return {
                filters:{
                    keyword: ''
                },
                list:[],
                total: 0,
                page: 1,
                listLoading:false,
                dialogVisible:false,
                form:{
                    appId:'xxxx'
                }
            }
        },
        methods:{
            searchAccounts(){

            },
            loadData(){
                let _this = this;
                getAccounts({
                    page: this.page,
                    size: 12
                }).then(data=>{
                    if(data.code == 200){
                        _this.list = data.data.list
                    }
                })
            },
            selsChange(){

            },
            handleAdd(){

            },
            getState(current){
                return current == 1?'是': '否'
            }
        },
        mounted() {
            this.loadData()
        }
    }

</script>

<style scoped lang="scss" >
    .page-container{
        margin-top: 40px;
    }
    .el-input{
        max-width: 240px;
    }
</style>
